<template>
  <view>
    <view class="module1">
      <up-swiper
          :list="list1"
          keyName="image"
          circular
          @click="click"
          height="300px"
          radius="0"
      ></up-swiper>
    </view>

    <view class="module2">
      <view class="user-image">
        <up-avatar
            icon="red-packet-fill"
            fontSize="22"
        ></up-avatar>
      </view>
      <view class="user-content">
      </view>
      <view class="user-login">
        <up-button style="width: 100px" color="#3d3935" type="primary" size="small" shape="circle" text="注册/登录"></up-button>
      </view>
    </view>

    <view class="module3">
      <view class="box">
        <view class="box-item">
          <up-text style="margin-top: 15px;" align="center" bold="true" size="20px" text="点 餐"></up-text>
          <up-text align="center" color="#6aab73" size="13px" lineHeight="30px" text="在线点，到店取"></up-text>
          <up-image :show-loading="true" :src="src" width="100px" height="100px"></up-image>
        </view>
      </view>
      <view class="box">
        <view class="box-item">
          <up-text style="margin-top: 15px;" align="center" bold="true" size="20px" text="求 购"></up-text>
          <up-text align="center" color="#6aab73" size="13px" lineHeight="30px" text="在线预约"></up-text>
          <up-image :show-loading="true" :src="src" width="100px" height="100px"></up-image>
        </view>
      </view>
    </view>

    <view class="module4">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handleJiaoLiuQun">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">交流群</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-service text-blue icon"></view>
          <text class="text">在线客服</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-community text-mauve icon"></view>
          <text class="text">反馈社区</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-dianzan text-green icon"></view>
          <text class="text">点赞我们</text>
        </view>
      </view>
    </view>

    <view class="module5">
      <up-text bold="true" text="活动新鲜事"></up-text>
      <up-image style="margin-top: 15px" :show-loading="true" :src="src" width="100%" height="150px"></up-image>
      <up-image style="margin-top: 15px" :show-loading="true" :src="src" width="100%" height="150px"></up-image>
      <view style="height: 80px"></view>
    </view>
  </view>
</template>

<script setup>
import {reactive} from 'vue';

const src = "https://cdn.uviewui.com/uview/swiper/swiper1.png";
// 使用 reactive 创建响应式数组
const list1 = reactive([
  {
    image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
  },
  {
    image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    title: '身无彩凤双飞翼，心有灵犀一点通',
  },
  {
    image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
  },
]);

const click = (index) => {
  console.log(index)
}


</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.module1 {
}

.module2 {
  margin: 15px 15px;
  padding: 20px 10px;
  border-radius: 8px;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0px 5px 5px 2px #ebebeb;

  .user-image {
    width: 100px;

    .box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }

  .user-content {
    width: 120px;
  }

  .user-login {
    width: 100px;
  }
}

.module3 {
  display: flex;
  justify-content: space-between;
  margin: 15px 15px;
  border-radius: 8px;

  .box {
    background-color: white;
    width: 50%;
    height: 200px;

    .box-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.module4 {
  .mine-actions {
    margin: 15px 15px;
    padding: 20px 0px;
    border-radius: 8px;
    background-color: white;

    .action-item {
      .icon {
        font-size: 28px;
      }

      .text {
        display: block;
        font-size: 13px;
        margin: 8px 0px;
      }
    }
  }
}

.module5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 15px 15px;
  border-radius: 8px;
}

</style>
